<template>
	<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
		<block v-if="list.length >= 2">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index === active ? 'text-red cur' : ''" v-for="(item, index) in list" :key="index" @tap="tabSelect($event, item)" :data-id="index">
					{{ item.name }}
				</view>				
			</view>			
		</block>
		<block v-else>
			<view class="cu-item" :class="index === active ? 'text-red cur' : ''" v-for="(item, index) in list" :key="index" @tap="tabSelect($event, item)" :data-id="index">
				{{ item.name }}
			</view>				
		</block>
	</scroll-view>	
</template>

<script>
	export default {
		props: {
			list: Array,
			act: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				TabCur: +this.act - 1,
				scrollLeft: 0
			};
		},
		computed: {
			active () {
				return +this.act - 1
			}
		},
		methods: {
			tabSelect(e, item) {
				//this.TabCur = +e.currentTarget.dataset.id
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.$emit('change', item)
			}
		}
	}	
</script>

<style>
</style>
